<template>
    <div class="change-car-detail-list">
        <div class="detail-list-section font-size-26">
            <div class="item display-flex justify-between">
                <div>
                    <span class="label">单号</span>
                    <span>{{ changeCarDetailListData.info.orderNo }}</span>
                </div>
                <div class="display-flex justify-flex align-center">
                    <van-image :src="auditIcon" fit="contain" class="audit-icon" v-if="changeCarDetailListData.info.orderStatus == '1'"/>
                    <van-image :src="rejectIcon" fit="contain" class="reject-icon" v-else/>
                    <span :class="changeCarDetailListData.info.orderStatus == '1'?'font-2CB526 ml-7':'font-CE0C0C ml-7'">
                        {{ changeCarDetailListData.info.orderStatus == '1'?'已审核':'未审核' }}
                    </span>
                </div>
            </div>
            <div class="item">
                <span class="label">仓库</span>
                <span>{{ changeCarDetailListData.list && changeCarDetailListData.list.length > 0?changeCarDetailListData.list[0].spckmc:''}}</span>
            </div>
            <div class="item">
                <span class="label">过车日期</span>
                <span>{{ changeCarDetailListData.info.changeDate}}</span>
            </div>
            <div class="item">
                <span class="label">车牌号</span>
                <span>{{changeCarDetailListData.info.cardNo}}</span>
            </div>
            <div class="item"> 
                <span class="label">司机姓名</span>
                <span>{{changeCarDetailListData.info.driverName}}</span>
            </div>
            <div class="item">
                <span class="label">联系电话</span>
                <span>{{changeCarDetailListData.info.phone}}</span>
            </div>
            <div class="item">
                <span class="label">身份证号</span>
                <span>{{changeCarDetailListData.info.idNo}}</span>
            </div>
            <div class="item">
                <span class="label">备注</span>
                <span>{{changeCarDetailListData.info.remark}}</span>
            </div>
            <div class="item">
                <span class="label">创建人</span>
                <span>{{changeCarDetailListData.info.createBy}}</span>
            </div>
            <div class="item">
                <span class="label">创建时间</span>
                <span>{{changeCarDetailListData.info.createTime}}</span>
            </div>
        </div>
        <div class="change-car-detail-list-list">
            <div class="section font-size-26" v-for="(item, index) in changeCarDetailListData.list" :key="index" @click="handleRead(index)">
                <div class="title display-flex justify-between align-center">
                    <span>{{ item.spzs }}</span>
                    <div class="display-flex align-center">
                        <van-image :src="readIcon"  fit="contain" class="read-icon"/>
                        <span class="font-255FB6 ml-7">查看</span>
                    </div>
                </div>
                <div class="content" >
                    <div class="item display-flex justify-between">
                        <div class="flex-item">
                            <span class="font-999999">纱支：</span>
                            <span>{{ item.wpggA }}</span>
                        </div>
                        <div class="flex-item">
                            <span class="font-999999">品牌：</span>
                            <span>{{ item.spcd }}</span>
                        </div>
                    </div>
                    <div class="item display-flex justify-between">
                        <div class="flex-item">
                            <span class="font-999999">条码：</span>
                            <span>{{ item.sptm }}</span>
                        </div>
                        <div class="flex-item">
                            <span class="font-999999">批号：</span>
                            <span>{{ item.spbh }}</span>
                        </div>
                    </div>
                    <div class="item display-flex justify-between">
                        <div class="flex-item">
                            <span class="font-999999">柜号：</span>
                            <span>{{ item.spgh }}</span>
                        </div>
                        <div class="flex-item">
                            <span class="font-999999">进仓日期：</span>
                            <span>{{ item.ssrqid }}</span>
                        </div>
                    </div>
                    <div class="item display-flex justify-between">
                        <div class="flex-item">
                            <span class="font-999999">过车重量：</span>
                            <span>{{ item.spsl }}吨</span>
                        </div>
                        <div class="flex-item">
                            <span class="font-999999">过车件数：</span>
                            <span>{{ item.spjs }}件</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import auditIcon from '@/assets/images/audit.png'
    import readIcon from '@/assets/images/read.png'
    import rejectIcon from '@/assets/images/reject.png'
    import { reactive, onMounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { getChangeCarDetails } from '@/api/changeCar'
   
    const route = useRoute()
    const router = useRouter()
    const changeCarDetailListData: any = reactive({
        query:{
            changeId:""
        },
        list:[],
        info:{
            orderNo: "",
            orderStatus: "",
            changeDate:"",
            cardNo: "",
            driverName: "",
            phone: "",
            idNo: "",
            remark: "",
            createBy: "",
            createTime: "",
        }
    })
    
    onMounted(() => {
        changeCarDetailListData.query.changeId = route.query.changeId
        getDetailList()
    })

    function getDetailList() {
        getChangeCarDetails(changeCarDetailListData.query).then((res:any) => {
            const data = res.data
            changeCarDetailListData.info = data.changeCar
            changeCarDetailListData.list = data.changeCarDt
        })
    }

    function handleRead(index: number) {
        const data =  changeCarDetailListData.list[index]
        router.push({path:'/changeCar/detail', query: data})
    }

</script>
<style lang="scss" scoped>
    .change-car-detail-list {
        background-color: #F3F4F7;
        .detail-list-section {
            margin:36px;
            border-radius:10px;
            background:#fff;
            border-radius:10px;
            padding:36px;
            .item {
                margin-bottom:22px;
                .label {
                    color:#999;
                    width:160px;
                    display:inline-block;
                }
                .audit-icon, .reject-icon {
                    width: 26px;
                    height: 26px;
                }
            }
        }
        &-top {
            padding:36px;
            font-size:26px;
            .btn {
                height:60px;
                border-radius: 8px;
            }
        }
        &-list {
            .section {
                border-radius: 10px;
                background-color:#fff;
                padding:26px;
                margin:0 36px 20px;
                .title {
                    padding-left:18px;
                    margin-bottom: 26px;
                    .read-icon {
                        width: 31px;
                        height: 26px;
                    }
                }
                .content {
                    border-top:1px solid #EEEEEE;
                    padding:26px 0 0;
                    .item {
                        padding-bottom:10px;
                    }
                }
            }
        } 
        &-btn {
            padding:122px 26px 80px;
            .btn {
                border-radius: 10px;
            }
        }
    }
</style>